<!-- 模板 -->
<template>
  <div class="root">
    <div class="top">
      <div class="picLeft">
        <div class="left" @click="logout()">
          <img src="../assets/tx.jpg" alt="" />
          <p>嘎啦嘎啦鸭</p>
        </div>
        <van-icon name="chat-o" @click="$router.push('/news')" />
      </div>
      <van-grid :border="false" :column-num="4">
        <van-grid-item>
          <p>0</p>
          <p>商品收藏</p>
        </van-grid-item>
        <van-grid-item>
          <p>0</p>
          <p>店铺关注</p>
        </van-grid-item>
        <van-grid-item>
          <p>2</p>
          <p>喜欢的内容</p>
        </van-grid-item>
        <van-grid-item>
          <p>0</p>
          <p>浏览记录</p>
        </van-grid-item>
      </van-grid>
    </div>
    <div class="list">
      <div class="My_foots">
        <div class="my-foot">
          <div
            :class="['item', item.active ? 'active' : '']"
            v-for="(item, index) in list"
            :key="item.id"
            @click="activeItem(index)"
          >
            <div :class="['iconfont', item.icon, 'icon']"></div>
            <div class="txt">{{ item.title }}</div>
          </div>
        </div>
      </div>
      <van-swipe-cell class="box1">
        <van-card
          title="运输中"
          desc="合肥转运中心公司 以打包"
          class="goods-card"
          thumb="https://img01.yzcdn.cn/vant/cat.jpeg"
        />
        <div class="data">05-05</div>
      </van-swipe-cell>
    </div>
    <div class="list2">
      <van-cell is-link title="我的学习" class="iconfont icon-wodexuexi" />
      <van-cell is-link title="购买记录" class="iconfont icon-goumaijilu" />
      <van-cell is-link title="意见反馈" class="iconfont icon-yijianfankui" />
      <van-cell is-link title="本地名片" class="iconfont icon-mingpian" />
      <van-cell is-link title="设置" class="iconfont icon-shezhi" />
    </div>
    <div class="MyImg">
      <img src="http://42.192.80.102/Printing man-img/back1.png" alt="" />
    </div>
    <MyFoots class="foots"></MyFoots>
  </div>
</template>
<script>
// import request from '../utils/request.js'
import MyFoots from "./MyFoots.vue";
export default {
  name: "",
  data() {
    return {
      list: [
        { id: 1, icon: "icon-daifukuan", title: "待付款", active: true },
        { id: 2, icon: "icon-daishouhuo", title: "待收货", active: false },
        { id: 3, icon: "icon-daipingjia", title: "待评价", active: false },
        {
          id: 4,
          icon: "icon-tuikuanshouhou",
          title: "退款/售后",
          active: false,
        },
        { id: 5, icon: "icon-wodedingdan", title: "我的订单", active: false },
      ],
    };
  },
  props: [],
  components: {
    MyFoots,
  },
  computed: {},
  filters: {},
  methods: {
    logout() {
      sessionStorage.removeItem("user-login");
      this.$router.push("/");
    },
  },
  created() {},
  mounted() {},
};
</script>
<style lang="less" scoped>
.root {
  background-color: #f5f5f5;
  margin-bottom: 0.96rem;
  .top {
    background-color: #ffcf35;
    .picLeft {
      display: flex;
      padding: 0.4rem 0.2rem 0;
      // padding-left: 0.2rem;
      justify-content: space-between;
      align-items: center;
      .left {
        display: flex;
        align-items: center;
        img {
          width: 0.6rem;
          height: 0.6rem;
          border-radius: 0.3rem;
        }
        p {
          // border: 1px solid red;
          line-height: 0.5rem;
          color: #fff;
          font-size: 0.28rem;
          padding-left: 0.3rem;
        }
      }

      /deep/.van-icon-chat-o {
        font-size: 0.4rem;
        color: #fff;
        // border: 1px solid red;
        // padding-left: 4.5rem;
      }
    }
  }
  /deep/.van-grid-item__content--center {
    background-color: #ffcf35;
  }
  .van-grid {
    .van-grid-item {
      padding-top: 0.1rem;
      p {
        color: #fff;
        padding-bottom: 0.1rem;
        font-size: 0.2rem;
      }
    }
  }
  .list {
    background-color: #fff;
    width: 96%;
    margin-left: 0.15rem;
    border-radius: 0.3rem;
    margin-top: 0.24rem;
    .My_foots {
      padding: 0.24rem 0;
    }
    .my-foot {
      border-radius: 0.2rem;
      margin-top: 0.2rem;
      // position: fixed;
      width: 100%;
      height: 0.96rem;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0.24rem 0.1;
      background-color: #fff;
      .item {
        padding: 0.14rem 0.16rem;
        flex: 1;
        text-align: center;
        font-size: 0.24rem;
        .icon {
          font-size: 0.5rem;
          margin-bottom: 0.05rem;
        }
      }
    }
    .box1 {
      padding: 0.2rem;
      .data {
        position: absolute;
        bottom: 1rem;
        left: 5.7rem;
        color: #706d6d;
        font-size: 0.24rem;
      }
      .van-card__title {
        padding-top: 0.2rem;
        font-size: 0.24rem;
      }
      .van-card__desc {
        margin-top: 0.2rem;
        font-size: 0.24rem;
      }
    }
  }
  .list2 {
    margin-top: 0.2rem;
    :first-of-type {
      margin-bottom: 0.2rem;
    }
    :last-of-type {
      margin-top: 0.2rem;
    }
    .van-cell {
      font-size: 0.25rem;
      &::before {
        display: block;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
    .icon-wodexuexi:before {
      color: #ffcf35;
      padding-right: 0.1rem;
    }
    .icon-goumaijilu:before {
      color: #ffcf35;
      padding-right: 0.1rem;
    }
    .icon-yijianfankui:before {
      color: #ffcf35;
      padding-right: 0.1rem;
    }
    .icon-mingpian:before {
      color: #ffcf35;
      padding-right: 0.1rem;
    }
    .icon-shezhi:before {
      color: #ffcf35;
      padding-right: 0.1rem;
    }
  }
  .MyImg {
    img {
      width: 100%;
      height: 150px;
      padding: 0.2rem;
    }
  }
}
</style>
